چند وقتی است که صاحبان سایت ها به فکر طراحی سایت برای موبایل ها شده اند. موبایل هایی با رزولوشن های مختلف و اندازه های متفاوت. مطمئنا تعداد این تفاوت ها با افزایش مدل های موبایل ها نیز افزایش خواهد یافت. به گفته متخصصین طراحی سایت برای نسخه های موبایل در ۵ سایل آینده تمام سایت ها را دربرخواهد گرفت.

، طراحی برای Iphone،  Blackberry، نوت بوک و کیندل هرکدام تفاوت هایی دارد. تصور طراحی متفاوت برای هرکدام از مدل های موبایل تا ۵ سایل دیگر تقریبا غیرممکن است. یا باید بازدیدکننده های یک سری از موبایل ها از سایت را در نظر نگیریم یا فکر اساسی دیگری کنیم.

طراحی واکنش گرا و روش جدیدی از طراحی است که به عواملی مانند درخواست کاربر، ابزار نمایش و پلتفرم و ظاهر می بایست پاسخ مناسب آن حال را به کاربر بدهد. طراحی واکنش گرا طراحی بر اساس مجموعه ای از ابزارها مانند گریدهای انعطاف پذیر و تصاویر خاص و از همه مهمتر CSS های هوشمندانه است. اگر کاربر از لپ تاپ خود به آیپد جابجا شود انداره عکس ها و رزولوشن بر اساس دستوراتی که از طرف کاربر و نیاز او ارسال می شود، تغییر خواهد کرد. به همین دلیل نیاز به طراحی مجدد برای هر نوع نیاز کاربر وجود نخواهد داشت و ابزارهای هوشمند در طراحی واکنش گرا، خود نیاز کاربر را مرتفع می کنند

طراحی واکنش گرا

Ethan Marcotte در مقاله ای تعریفی از طراحی واکنش گرا داشته است:

” طراحی واکنش گرا که به تازگی به عنوان تکنولوژی جدید مطرح شده است در حقیقت واکنش فضاهای خالی موجود در صفحه وب بر اساس درخواست کاربر است. این تکنولوژی با استفاده از ربات به نیاز های کاربر با استفاده از ابزارهایی مانند قوانین از قبل تعریف شده و محدوده قابل تعریف برای المان های موجود در صفحه طراحی اصولی و مناسبی را انجام می دهد. جابجایی ها در فضاهای خالی ولی در محدوده از قبل تعریف شده انجام می شود تا طراحی نهایی صورت گرفته از حالت دلخواه کاربر و صاحب سایت خارج نشود و در عین حال طرح مورد نیاز و قابل استفاده و از همه مهمتر، زیبایی را به ارمغان آورد”

تنظیم کردن رزولوشن صفحه

هر روز انواع اندازه های تصاویر با امکان نمایش اندازه های مختلف تصویر،ر نگ و رزولوشن تولید می شوند. برخی ابزارهای امکان تغییر صفحه از حالت افقی به عمودی و برعکس را نیز دارند.

یکی از راه های طراحی این است که اندازه های را گروه بندی کنیم و اندازه هایی که از لحاظ ساختار خاصی با یکدیگر در یک گروه قرار می گیرند را در یک گروه قرار دهیم. این راه ممکن است عملی باشد ولی بسیار پیچیده خواهد بود. دلیلی آن هم مشخص است. اولا ممکن است برای موارد مختلف دسته بندی ها متفاوت و صفحات در دسته های مختلف جابجا شود. دوما نمی توان از همین الان پیش بینی کرد که چه مشخصه ای مهمتر و نیز چه اندازه هایی تولید خواهند شد و مهمتر اینکه لزوما همه افراد مرورگر خود را همیشه در یک اندازه نگه نمی دارند.

تصور زیر آماری از ۴۰۰ ابزاری که در فاصله سال های ۲۰۰۵ تا ۲۰۰۸ تولید شده اند را نشان می دهد.

از سال ۲۰۰۸ تاکنون نیز ابزارهای جدیدتری تولید شده اند. پس به راحتی نمی توان مشخص کرد که برای چه دسته ای از اندازه ها چه استانداردی می توان تعیین کرد. راه حل چیست؟

یکی از راه حل ها: انعطاف پذیری در همه چیز!

چند سال پیش انعطاف پذیری در صفحه نمایش به نوعی حالت لوکس داشت و کاربرد خاصی در آن دیده نشده بود و صرفا امکانی جذاب برای متفاوت بودن به شمار می رفت. انعطاف پذیری نیر در آن محدود به المان های خاص و نیز حال های محدودی مانند شمای کار و متن بود. به عنوان مثال می توان امکان جابجایی متن در ستونی مشخص را نام برد که می توانست با کوچکتر شدن تصویر جابجایی داشته باشد. این جابجایی از طرفی کاملا در ابعاد مشخص صورت می گرفت و مهمتر از آن استاتیک بودن آن بود. یعنی اندازه ها و تغییرات از قبل مشخص بود و نمی توانست تغییراتی مانند جابجایی از صفحه نمایش تلویزیوت به نوت بوک را امکان پذیر سازد.

هم اکنون این تغییرات وسعت بسیار بیشتری به خود گرفته و عکس ها نیز با اندازه های مناسب برای قرار گیری مناسب در مکان ها و ستون ها مشخص تغییر می کنند.با اینکه هنوز راه برای برطرف سازی اشکالات  مانده است ولی با این حال پیشرفت های بسیاری در زمینه انعطاف پذیری المان های مختلف صورت گرفته است.

در تصویر مشاهده کردید که گریدها و تصاویر شناور شده اند. شناور سازی گرید ها یکی از پرکاربردترین بخش های طراحی واکنش گرا محسوب می شود. مقالات و آموزش های متعددی برای آن نوشته شده است که برخی از آنها به شرح زیر می باشد.

• Hiding and Revealing Portions of Images
• Creating Sliding Composite Images
• Foreground Images That Scale With the Layout

به لوگوی تصویر نگاه کنید. در تغییر داده شده مشاهده می کنید که بخشی از لوگو تغییری نکرده ولی بخشی از آن کاملا جدا شده است. در تعریف آن برای صفحه وب دو بخش برای لوگو در نظر گرفته شده است. بخش ثابت و بخش متحرک. بخش متحرک آن درموقع لزوم و در شرایط خاص کاملا از تصویر جدا شده است و بخش ثابت بدون تغییر در هر شرایطی باقی خواهد ماند.

عکس های انعطاف پذیر

عکس ها یکی از جدی ترین و پر بحث ترین بخش های طراحی واکنش گرا محسوب می شوند. روش های متنوعی برای تغییر اندازه عکس معرفی شده است که راحت ترین و پرکاربردترین آنها شاید “عکس های شناور” باشد. با این حال یکی از معروف ترین تکنیک ها استفاده از تگ  max-width در CSS است.

حداکثر اندازه تصویر ۱۰۰% است. در حقیقت اندازه عکس بزرگترین حالت آن می باشد. با کوچکتر شده صفحه، درصد بزرگی عکس نیز کاهش می یابد. این تکنیک که عکس های شناور نامیده می شود عکس را در اندازه اصلی معرفی می کند و بدون مشخص کردن اندازه طول و ارتفاع، تغییر اندازه عکس را بر عهده صفحه گذاشته است.

در نظر داشته باشید که تگ معرفی شده در IE کاربر ندارد. این تگ را در IE با افزودن تگ width: 100% می توان برطرف کرد.

یکی از اشکالات این روش افزایش زمان بارگزاری صفحه مخصوصا در زمان هایی است که اندازه اصلی تصویر کوچکتر از اندازه صفحه نمایش است. دلیل آن این است که هم اندازه عکس باید تغییر کند که زمانبر است و هم حجم عکس بزرگتر می شود.

در بخش دوم این مقاله به بررسی روش های دیگر طراحی واکنش گرا می پردازیم. هرگونه پیشنهاد و نظری دارید حتما ما را در جریان قرار دهید.

نظرات شما عزیزان:

نام :

آدرس ایمیل:

وب سایت/بلاگ :

متن پیام:

نظر خصوصی

 کد را وارد نمایید:

 

 

 

عکس شما

آپلود عکس دلخواه: